<!doctype html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>项目索引</title>
  </head>
  <body>
    <div id="app">
      <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }

        #box div {
          display: inline-block;
          margin: 5px;
          font-size: 45px;
          font-weight: bold;
          animation: 2s obrot linear infinite;
        }

        #box {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 500px;
          height: 500px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        @keyframes obrot {
          0% {
            transform: rotateX(0);
          }
          12.5% {
            transform: rotateX(90deg);
          }
          25% {
            transform: rotateX(180deg);
          }
          37.5% {
            transform: rotateX(270deg);
          }
          50% {
            transform: rotateX(360deg);
          }
          100% {
            transform: rotateX(360deg);
          }
        }

        #box div:nth-child(1) {
          animation-delay: 0s;
        }
        #box div:nth-child(2) {
          animation-delay: 0.1s;
        }
        #box div:nth-child(3) {
          animation-delay: 0.2s;
        }
        #box div:nth-child(4) {
          animation-delay: 0.3s;
        }
        #box div:nth-child(5) {
          animation-delay: 0.4s;
        }
        #box div:nth-child(6) {
          animation-delay: 0.5s;
        }
        #box div:nth-child(7) {
          animation-delay: 0.6s;
        }
        #box div:nth-child(8) {
          animation-delay: 0.7s;
        }
        #box div:nth-child(9) {
          animation-delay: 0.8s;
        }
        #box div:nth-child(10) {
          animation-delay: 0.9s;
        }
      </style>

      <!-- From Uiverse.io by wojtek_4284 -->
      <div id="box">
        <div id="l1">L</div>
        <div id="l2">O</div>
        <div id="l3">A</div>
        <div id="l4">D</div>
        <div id="l5">I</div>
        <div id="l6">N</div>
        <div id="l7">G</div>
        <div id="l8">.</div>
        <div id="l8">.</div>
        <div id="l10">.</div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
